<template>
  <el-dialog
    v-model="props.dialogVisible"
    :title="props.title"
    width="500px"
    top="3vh"
    :before-close="() => emit('close')"
  >
    <el-form :model="state.formData" label-width="80px">
      <el-form-item label="角色名称">
        <el-input
          v-model="state.formData.roleName"
          placeholder="请输入角色名称"
        />
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input
          v-model="state.formData.roleKey"
          placeholder="请输入权限字符"
        />
      </el-form-item>
      <el-form-item label="角色顺序">
        <el-input
          type="number"
          v-model="state.formData.roleSort"
          placeholder="请输入角色顺序"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="state.formData.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单权限">
        <div class="tree-border">
          <el-tree
            ref="treeMenu"
            node-key="id"
            :props="treeProps"
            :data="state.treeData"
            show-checkbox
          />
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => emit('close')">取消</el-button>
        <el-button type="primary" @click="onConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  defineExpose,
  defineProps,
  defineEmits,
  reactive,
  onMounted,
  ref,
  nextTick,
} from 'vue'
import { addRoleFun, treeSelectFun, updateRole } from '@/api/role/role.ts'
import { ElMessage } from 'element-plus'

const treeMenu = ref()
const emit = defineEmits(['close'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  isAdd: {
    type: Boolean,
    default: false,
  },
})
const treeProps = { children: 'children', label: 'label' }
// 页面数据
const state = reactive({
  treeData: [],
  formData: {
    status: '0',
    roleName: '',
    roleKey: '',
    roleSort: '',
    menuIds: [],
  },
})

onMounted(() => {
  getMenuTreeSelect()
})

// 查询下拉菜单数据
const getMenuTreeSelect = () => {
  treeSelectFun().then((response) => {
    state.treeData = response.data
  })
}
// 获取树形菜单选中的值
const getTreeData = () => {
  // 获取已选中的值
  const currentNode = treeMenu.value.getCheckedKeys()
  // 获取半选中的值
  const halfCheckedNodes = treeMenu.value.getHalfCheckedKeys()
  // 返回合并数据
  return [...halfCheckedNodes, ...currentNode]
}
// 确定按钮
const onConfirm = () => {
  state.formData.menuIds = getTreeData()
  console.log(state.formData)
  if (state.formData.roleId) {
    updateRole(state.formData).then((res) => {
      ElMessage.success('修改成功')
      emit('close', true)
    })
  } else {
    addRoleFun(state.formData).then((res) => {
      ElMessage.success('新增成功')
      emit('close', true)
    })
  }
}

// 回填数据
const setFormData = (form, checkMenu) => {
  state.formData = {
    status: '0',
    roleName: '',
    roleKey: '',
    roleSort: '',
    menuIds: [],
  }
  // 清空树形选择
  treeMenu.value.setCheckedKeys([], false)
  if (form) {
    state.formData = form
    checkMenu.forEach((v) => {
      treeMenu.value.setChecked(v, true, false)
    })
  }
}

defineExpose({
  setFormData,
})
</script>

<style scoped lang="scss">
.tree-border {
  padding: 10px;
  width: 100%;
  border: 1px solid var(--el-color-primary);
  border-radius: 5px;
  min-height: 200px;
  max-height: 400px;
  overflow: auto;
}
</style>
